GreenSock last won the day on
GreenSock had the most liked content!
GreenSock
Administrators-
Posts
23,183 -
Joined
-
Last visited
-
Days Won
821
GreenSock last won the day on
GreenSock had the most liked content!
About GreenSock
Contact Methods
- Personal Website
- CodePen
Profile Information
-
Location
Chicago Area
-
Interests
Volleyball, Basketball, Christian Apologetics, Motorcycling
GreenSock's Achievements
-
Sorry about the delay and the confusion, @Grene Thanks for pointing this out - there was indeed a bug that could affect orientation changes (they wouldn't fire a ScrollTrigger.refresh() properly. That should be fixed in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js In the meantime, there's an easy workaround: let mm = gsap.matchMedia(); mm.add("(orientation: portrait)", () => { ScrollTrigger.refresh(); return () => ScrollTrigger.refresh(); }); Technically, you could do this instead, but I don't think it's as well-supported across browsers: window.addEventListener("orientationchange", () => ScrollTrigger.refresh()); Does that resolve things for you?
- 1 reply
-
- 2
-
From the docs: There is a helper function that can help in that situation. You also need to make sure the elements are in the document flow so that calculations can be done correctly, but you had display: none on the parent. So you could toggle that for the split. https://codepen.io/GreenSock/pen/RwmrWPy?editors=1010 Better?
-
Anytime! 🙌
-
Pseudo elements are not accessible to JavaScript. That's a browser limitation, unrelated to GSAP. Usually a good workaround is to use CSS variables (GSAP can animate those), but that might be tricky for a drawSVG effect. If you can use a normal element, that's probably best.
-
useGSAP hook cleanup does not appear to be working with scroll trigger
GreenSock replied to Nightshift's topic in GSAP
One other guess: make sure you register the useGSAP hook and ScrollTrigger: gsap.registerPlugin(useGSAP, ScrollTrigger); -
Hi @pedrobear. There's a lot of very custom logic in that CodePen demo, and it's well beyond the scope of help we can provide for free in these forums, but if you'd like to isolate a very specific problem in a much simpler version, we'd be happy to take a peek and help with any GSAP-specific questions. It looks likely to me that the snap-back with the arrow functionality has to do with logic flaws in where you're animating to (calculations). As for being sluggish, there are a lot of factors with that (performance is a very deep topic), but one possibility is that browsers have rendering engines that are optimized for vertical scrolling, not as much horizontal scrolling, so you may be hitting some browser-specific optimization limitations. For example, I know that if you have elements that go beyond a certain width, the browser forces it to get broken into multiple tiles for the graphics renderer, and switching between them can be a little expensive. None of that has anything to do with GSAP. Good luck!
-
Are you looking for something like this?: https://codepen.io/GreenSock/pen/PovPzpv?editors=0010
-
Are you saying you still need help to figure out that error or are you saying you're all good now?
- 16 replies
-
- scrollsmoother
- scrollto
-
(and 2 more)
Tagged with:
-
If I understand your goal correctly, you can just use ScrollSmoother's paused() method: https://codepen.io/GreenSock/pen/vYwNNdP?editors=0010
- 16 replies
-
- 1
-
- scrollsmoother
- scrollto
-
(and 2 more)
Tagged with:
-
I read your post several times and I don't understand what you're asking, sorry. I'm not sure what you're trying to do. You seem to have .info-content-right stuff that has a width of 100% which ends up being 0 (check dev tools), so none of it would be visible anyway. I'm just completely lost about what you're trying to do, sorry. 🤷♂️
-
ScrollTrigger and cards animating vertically
GreenSock replied to Fernando Matias Cohen's topic in GSAP
Yeah, it's just a logic issue in your code: // bad .to(item, { background: "#ed3c3c",boxShadow:'0 0 16px #ed3c3c' }, 0.5 * i) // good .to(item, { background: "#ed3c3c",boxShadow:'0 0 16px #ed3c3c' }, 0.5 * (i-1)) You were running that logic on only the 2nd item and after. Thus everything starts at 0.5 seconds into the timeline. https://codepen.io/GreenSock/pen/PovweLe?editors=0010 -
You had various syntax problems and logic problems in your code. Plus you weren't loading or registering ScrollTrigger. Is this what you're looking for?: https://codepen.io/GreenSock/pen/jOoExGv?editors=1010
-
Issue with Scroll Position Resetting After Programmatic Scroll in GSAP
GreenSock replied to chillypills's topic in GSAP
Yeah, that doesn't look like it's GSAP-related at all. GSAP seems to be doing its job, but from what I can tell, you've got some other library or logic that's implementing a fake scrollbar and it's not getting updated properly when the window is scrolled to the appropriate position. I'd recommend looking at that library to figure out what it's doing (or not doing). Maybe there's some kind of update method you need to call from within an onUpdate on the scrollTo tween to get it to update that fake scrollbar to the correct position. We can't really do much if you don't provide a minimal demo (like a CodePen or Stackblitz) or if it's not a GSAP-related issue. Hopefully this gets you going in the right direction though. Good luck!